<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<div slot="header">
			<l-back class="mb-[38px]" />
			<el-form ref="queryForm" :inline="true" label-width="100px" :model="queryParams">
				<el-form-item label="商品ID:" prop="goodsId">
					<el-input v-model.trim="queryParams.goodsId" clearable placeholder="请输入商品ID" maxlength="11" show-word-limit />
				</el-form-item>
				<el-form-item label="商品名称:" prop="goodsName">
					<el-input v-model.trim="queryParams.goodsName" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="用户ID:" prop="userId">
					<el-input v-model.trim="queryParams.userId" clearable placeholder="请输入用户ID" maxlength="6" show-word-limit />
				</el-form-item>
				<el-form-item label="手机号码:" prop="mobile">
					<el-input v-model.trim="queryParams.mobile" clearable placeholder="请输入手机号码" maxlength="11" show-word-limit />
				</el-form-item>
				<el-form-item label="拼团状态:" prop="collageStatus">
					<el-select v-model="queryParams.collageStatus" clearable filterable placeholder="请选择拼团状态">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<start-end-time ref="child" :get-time="getTime" title="创建时间:"></start-end-time>
				<el-form-item>
					<div class="page-search-btn">
						<el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" type="primary" plain @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<el-table v-loading="loading" :data="tableData" stripe>
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goodsName" show-overflow-tooltip min-width="156"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
				<template slot-scope="scope">
					<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="userId" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="供应价格" prop="supplyPrice" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品价格" prop="goodsPrice" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="拼团价格" prop="collagePrice" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="拼团状态" prop="collageStatus" min-width="120">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.collageStatus === 1" type="success">成功</el-tag>
					<el-tag v-else-if="scope.row.collageStatus === 2">拼团中</el-tag>
					<el-tag v-else-if="scope.row.collageStatus === 3" type="danger">失败</el-tag>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('hh:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>

<script>
import dayjs from 'dayjs';
export default {
	name: 'Index',
	data() {
		return {
			dayjs,
			tableData: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				mobile: null,
				goodsId: null,
				goodsName: null,
				userId: null,
				collageStatus: null,
			},
			total: 0,
			statusList: [
				{
					label: '全部',
					value: null,
				},
				{
					label: '成功',
					value: 1,
				},
				{
					label: '进行中',
					value: 2,
				},
				{
					label: '失败',
					value: 3,
				},
			],
			loading: false,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		resetQuery() {
			this.$refs.child.resetTime();
			this.$refs.queryForm.resetFields();
			this.handleQuery();
		},
		getList() {
			this.loading = true;
			this.$request
				.post('/system/collage/collageRecord', this.queryParams)
				.then((res) => {
					this.tableData = res.data.records || [];
					this.total = res.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
	},
};
</script>

<style scoped></style>
